<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 修改
                </el-breadcrumb-item>
                <el-breadcrumb-item>个人信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="昵称">
                        <el-input v-model="form.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="爱好">
                        <el-input v-model="form.hobby"></el-input>
                    </el-form-item>
                    <el-form-item label="住址">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="修改密码">
                        <el-input v-model="form.pwd" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="pwd" show-password></el-input>
                    </el-form-item>

<!--                    <el-form-item label="选择器">-->
<!--                        <el-select v-model="form.region" placeholder="请选择">-->
<!--                            <el-option key="bbk" label="步步高" value="bbk"></el-option>-->
<!--                            <el-option key="xtc" label="小天才" value="xtc"></el-option>-->
<!--                            <el-option key="imoo" label="imoo" value="imoo"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="日期时间">-->
<!--                        <el-col :span="11">-->
<!--                            <el-date-picker-->
<!--                                type="date"-->
<!--                                placeholder="选择日期"-->
<!--                                v-model="form.date1"-->
<!--                                value-format="yyyy-MM-dd"-->
<!--                                style="width: 100%;"-->
<!--                            ></el-date-picker>-->
<!--                        </el-col>-->
<!--                        <el-col class="line" :span="2">-</el-col>-->
<!--                        <el-col :span="11">-->
<!--                            <el-time-picker-->
<!--                                placeholder="选择时间"-->
<!--                                v-model="form.date2"-->
<!--                                style="width: 100%;"-->
<!--                            ></el-time-picker>-->
<!--                        </el-col>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="城市级联">-->
<!--                        <el-cascader :options="options" v-model="form.options"></el-cascader>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="选择开关">-->
<!--                        <el-switch v-model="form.delivery"></el-switch>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="多选框">-->
<!--                        <el-checkbox-group v-model="form.type">-->
<!--                            <el-checkbox label="步步高" name="type"></el-checkbox>-->
<!--                            <el-checkbox label="小天才" name="type"></el-checkbox>-->
<!--                            <el-checkbox label="imoo" name="type"></el-checkbox>-->
<!--                        </el-checkbox-group>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="单选框">-->
<!--                        <el-radio-group v-model="form.resource">-->
<!--                            <el-radio label="步步高"></el-radio>-->
<!--                            <el-radio label="小天才"></el-radio>-->
<!--                            <el-radio label="imoo"></el-radio>-->
<!--                        </el-radio-group>-->
<!--                    </el-form-item>-->
                    <el-form-item label="自我介绍">
                        <el-input type="textarea" rows="5" v-model="form.introduction"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button @click="onCancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
export default {
    name: 'baseform',
    data() {
        return {
            pwd:'',
            form: {
                nickname: localStorage.getItem('nickname'),
                hobby:localStorage.getItem('hobby'),
                address:localStorage.getItem('address'),
                pwd:'',
                introduction:localStorage.getItem('introduction'),
                account:localStorage.getItem('ms_username')


                // region: '',
                // date1: '',
                // date2: '',
                // delivery: true,
                // type: ['步步高'],
                // resource: '小天才',
                // desc: '',
                // options: []
            }
        };
    },
    methods: {
        onSubmit() {
            if (this.form.pwd==''){
                this.$alert('密码不能为空','修改提示',{
                    confirmButtonText:'填写密码',
                })
            }else if (this.pwd==''){
                this.$alert('确认密码不能为空','修改提示',{
                    confirmButtonText:'填写确认密码',
                })
            }else if (this.pwd!=this.form.pwd){
                this.$alert('两次密码不一致','修改提示',{
                    confirmButtonText:'修改密码',
                })
            }else{
                axios.post('http://localhost:8888/edit',this.form)
                    .then(res=>{

                        if(res.data.code==2000){

                            localStorage.setItem('ms_username', this.form.account);
                            localStorage.setItem('nickname', this.form.nickname);
                            localStorage.setItem('hobby', this.form.hobby);
                            localStorage.setItem('address', this.form.address);
                            localStorage.setItem('introduction', this.form.introduction);
                            this.pwd='';
                            this.$alert( '修改成功', {confirmButtonText: '知道了',});
                            this.$message.success('提交成功！');
                            this.$router.push('/dashboard');
                            location. reload()
                        }


                    })
            }


            // this.$message.success('提交成功！');
        },
        onCancel(){
            this.$router.push('/dashboard');
            location. reload()

        }
    }
};
</script>